<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引出组件生命周期</title>
</head>
<body>
    <div id="container"></div>

    <script src="../js-react/react@16.development.js"></script>
    <script src="../js-react/react-dom@16.development.js"></script>
    <script src="../js-react/babel@6.min.js"></script>

    <script type="text/babel">
        
        // 生命周期回调函数 <==> 生命周期钩子函数 <==> 生命周期函数 <==> 生命周期钩子
        // 定义组件
        class Life extends React.Component {

            state = {opacity: 1}

            death = () => {
                // 卸载组件之前清除定时器，
                // 方法1: 放在此处
                // 方法2: 放在React组件生命周期函数中 => componentWillUnmount
                // clearInterval(this.timer)
                // 卸载组件
                // console.log(document.getElementById('container'), this)
                ReactDOM.unmountComponentAtNode(document.getElementById('container'))
                // ReactDOM.unmountComponentAtNode(this)    // this 是Life对象，而不是虚拟DOM，unmount是卸载虚拟DOM
            }

            // 组件挂载完毕React自动调用
            componentDidMount() {
                this.timer = setInterval(() => {
                    let {opacity} = this.state
                    opacity -= 0.1
                    if (opacity <= 0) opacity = 1
                    this.setState({opacity})
                }, 200);
            }

            // 卸载组件之前调用
            componentWillUnmount() {
                // 卸载组件之前清除定时器，
                clearInterval(this.timer)
            }

            // 1初始化调用，2状态改变是调用
            render() {
                return (
                    <div>
                        <h1 style={{opacity:this.state.opacity}}>React 学不会怎么办？？</h1>
                        <button onClick={this.death}>不活了</button>
                    </div>
                )
            }
        }

        // 渲染组件到页面
        ReactDOM.render(<Life/>, document.getElementById('container'))
    </script>
</body>
</html>